<template>
 <div class="container">
    <div id="graph"></div>
    <TeleportContainer />
</div>
</template>

<script lang='ts'>
import { Graph,Shape } from '@antv/x6';
import { register,getTeleport} from '@antv/x6-vue-shape'
import {defineComponent,ref,onMounted} from 'vue';
import GCard from '../../components/gcard.vue';
const TeleportContainer = getTeleport();
export default  defineComponent({
    components:{
        TeleportContainer
    },
    setup() {
        let graph = ref();
        // Graph.registerNode(
        //     'custom-node',
        //     {
        //         width: 200,
        //         height: 60,
        //         attrs: {
        //         body: {
        //             stroke: '#5F95FF',
        //             strokeWidth: 1,
        //             fill: 'rgba(95,149,255,0.05)',
        //             refWidth: 1,
        //             refHeight: 1,
        //         },
        //         image: {
        //             'xlink:href':
        //             'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
        //             width: 16,
        //             height: 16,
        //             refX: 10,
        //             refY: 16,
        //         },
        //         title: {
        //             text: 'Node',
        //             refX: 40,
        //             refY: 16,
        //             fill: 'rgba(0,0,0,0.85)',
        //             fontSize: 12,
        //             'text-anchor': 'start',
        //         },
        //         text: {
        //             text: 'this is content text',
        //             refX: 40,
        //             refY: 38,
        //             fontSize: 12,
        //             fill: 'rgba(0,0,0,0.6)',
        //             'text-anchor': 'start',
        //         },
        //         },
        //         markup: [
        //         {
        //             tagName: 'rect',
        //             selector: 'body',
        //         },
        //         {
        //             tagName: 'image',
        //             selector: 'image',
        //         },
        //         {
        //             tagName: 'text',
        //             selector: 'title',
        //         },
        //         {
        //             tagName: 'text',
        //             selector: 'text',
        //         },
        //         ],
        //     },
        //     true,
        //     )
        
        register({
            shape: "custom-node",
            width: 100,
            height: 100,
            component: GCard,
        })
        onMounted(()=>{
            graph.value = new Graph({
                container: document.getElementById('graph')!,
              //  grid: true, 
                 panning: true,
                 width: 2000,
                 height: 2000
              });
            graph.value.addNode({
                x: 200,
                y: 160,
                shape: 'custom-node',
                width: 150,
                height: 100,
                data: {
                    url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
                    title: "wjq test",
                    desc: "中国品牌!!!"
                }
                })

            // graph.value.addNode({
            //         x: 600,
            //         y: 120,
            //         width: 96,
            //         height: 96,
            //         markup: [
            //             {
            //             tagName: 'path',
            //             selector: 'eye1',
            //             groupSelector: 'eye',
            //             attrs: {
            //                 d: 'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
            //             },
            //             },
            //             {
            //             tagName: 'path',
            //             selector: 'eye2',
            //             groupSelector: 'eye',
            //             attrs: {
            //                 d: 'M71.606,48.678c5.422,0,9.833-6.644,9.833-14.811c0-8.165-4.411-14.809-9.833-14.809c-5.421,0-9.831,6.644-9.831,14.809C61.775,42.034,66.186,48.678,71.606,48.678z',
            //             },
            //             },
            //             {
            //             tagName: 'path',
            //             selector: 'lip',
            //             attrs: {
            //                 d: 'M95.855,55.806c-0.6-0.605-1.516-0.77-2.285-0.4C81.232,61.29,65.125,64.53,48.214,64.53c-16.907,0-33.015-3.24-45.354-9.123c-0.77-0.367-1.688-0.205-2.284,0.4c-0.599,0.606-0.747,1.526-0.369,2.29c5.606,11.351,25.349,19.277,48.008,19.277c22.668,0,42.412-7.929,48.012-19.279C96.603,57.332,96.453,56.411,95.855,55.806z',
            //             },
            //             },
            //         ],
            //         attrs: {
            //             lip: {
            //             fill: '#E0A31A',
            //             },
            //             eye: {
            //             fill: '#730000',
            //             },
            //         },
            //         })

            // const source = graph.value.addNode({
            //         x: 300,
            //         y: 40,
            //         width: 80,
            //         height: 90,
            //         label: 'Hello',
            //         attrs: {
            //             body: {
            //             stroke: '#8f8f8f',
            //             strokeWidth: 1,
            //             fill: '#fff',
            //             rx: 6,
            //             ry: 6,
            //             },
            //         },
            // })

            // const target = graph.value.addNode({
            //         x: 420,
            //         y: 180,
            //         width: 80,
            //         height: 40,
            //         label: 'World',
            //         attrs: {
            //             body: {
            //             stroke: '#8f8f8f',
            //             strokeWidth: 1,
            //             fill: '#fff',
            //             rx: 6,
            //             ry: 6,
            //             },
            //         },
            // })
            // const out = graph.value.addNode({
            //         x: 500,
            //         y: 40,
            //         width: 80,
            //         height: 40,
            //         label: 'out',
            //          attrs: {
            //             body: {
            //             stroke: '#8f8f8f',
            //             strokeWidth: 1,
            //             fill: '#fff',
            //             rx: 6,
            //             ry: 6,
            //             },
            //         },
            // })
            // const rect = new Shape.Rect({
            //         x: 40,
            //         y: 40,
            //         width: 100,
            //         height: 40,
            //         attrs: {
            //             // 指定 rect 元素的样式
            //             body: { 
            //             stroke: '#000', // 边框颜色
            //             fill: '#fff',   // 填充颜色
            //             },
            //             // 指定 text 元素的样式
            //             label: { 
            //             text: 'rect', // 文字
            //             fill: '#333', // 文字颜色
            //             },
            //         },
            //         })
            // graph.value.addNode(rect)
            // graph.value.addEdge({
            //         source,
            //         target
            // })
            //  graph.value.addEdge({
            //         source:target,
            //         target:out
            // })

        })
        return {
            graph
        }
    }
})
</script>

<style lang="scss">
@import './graph.scss'
</style>